<template>
	<view>
	<u-popup
		mode="bottom"
		bgColor="transparent"
		:safeAreaInsetBottom="false"
		closeable
		zIndex="9"
		:show="showConpon"
		@close="closeConpon">
		<view class="coupon-popup">
			<view class="coupon-popup-title main-flex">领取优惠券</view>
			<view class="coupon-popup-content" @touchmove.stop.prevent>
				<scroll-view class="coupon-list" scroll-y>
					<view class="coupon-list-box">
						<view class="coupon-list-item" v-for="(item, index) in tableList" :key="index">
							<coupon-item :coupon="item">
								<template #receive="{item1}">
									<view class="coupon-item-btn1 main-flex" v-if="item.have === 1" @click="goUse">立即使用</view>
									<view class="coupon-item-btn" v-else-if="item.have === 0" @click="coupon(item)">立即领取</view>
								</template>
							</coupon-item>
						</view>
						<view
							v-if="isNull"
							class="null main-flex">
							<u-empty text="还没有优惠券领取哟~" icon="/static/images/null.png"></u-empty>
							<view class="null-btn" @click="goBuy">领券中心</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
	<!--商品弹窗-->
	<!-- <goods-popup
	@close="closeGoods"
	@add="addGoods"
	:showGoods="showGoods"
	:goods="goodsInfo"></goods-popup> -->
	</view>
</template>

<script setup>
  /**
   * ChooseConpon 选择地址
   * @description 选择地址
   * @property {Object} total 购物车计算信息
   * @event {Function} close 关闭
   */
	import { computed, onMounted, ref, watch } from "vue"
	import useUserStore from "@/store/modules/user"
	import useSetStore from '@/store/modules/set'
	import modal from '@/plugins/modal'
	import { arrText } from "@/utils/ty"
	import { sleep } from '@/uni_modules/uview-plus'
	import { couponReceiveList, couponProductReceiveList, couponGetOne, couponProductGetOne } from "@/api/app_api/coupon"
	
	const userStore = useUserStore()
	const setStore = useSetStore()
	const props = defineProps({
		showConpon: {
			type: Boolean,
			default: false 
		}
	})
	
	const emits = defineEmits(['close'])
	const closeConpon = () => {
		emits('close', false)
	}
	
	// 列表查询
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		Promise.all([couponReceiveList(), couponProductReceiveList({
			regionCode: userStore.regionCode
		})]).then(([result1, result2]) => {
			const coupon1 = result1.data || []
			const coupon2 = result2.data || []
			const nowTime = new Date()
			tableList.value = coupon1.concat(coupon2).sort((a, b) => a.have - b.have).filter(item => {
				const endTime = new Date(item.endTime)
				return nowTime.getTime() < endTime.getTime()
			})
			// console.log(tableList.value)
			status.value = 'no-more'
			isNull.value = tableList.value.length === 0
			isLoading.value = false
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
		})
	}
	
	// 领取优惠券
	const isSubmit = ref(false)
	const coupon = (item) => {
		if (isSubmit.value) return false
		isSubmit.value = true
		couponGetOne({
			id: item.id,
			productId: item?.productId || ''
		}).then(async res => {
			if (res.data === 4) {
				isSubmit.value = false
				return uni.$u.toast(res.msg)
			}
			uni.$u.toast('领取成功')
			getList()
			await uni.$u.sleep(1000)
			isSubmit.value = false
		}).catch(err => {
			isSubmit.value = false
		})
	}
	const goUse = () => {
		emits('close', false)
	}
	const goBuy = () => {
		uni.navigateTo({
			url: '/pages/coupon/list'
		})
		emits('close', false)
	}
	watch(() => props.showConpon, (nval, oval) => {
		if (nval) {
			getList()
		}
	})
	onMounted(() => {
		// getList()
	})
	
</script>

<style lang="scss" scoped>
  .coupon-popup {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #ffffff;
		padding-bottom: calc(var(--window-bottom) + 100rpx);
		&-title {
			height: 48px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			justify-content: center;
			padding: 0 15px;
		}
		&-content {
			background-color: #f5f5f5;
			padding: 0 15px;
		}
		.coupon{
			&-list {
				height: 680rpx;
				&-box {
					padding: 20rpx 0;
				}
				.coupon-list-item + .coupon-list-item {
					margin-top: 20rpx;
				}
			}
			&-item {
				&-btn {
					width: 150rpx;
					height: 48rpx;
					border-radius: 24rpx;
					font-size: 24rpx;
					margin-left: auto;
					background-color: $primary-color;
					color: #ffffff;
					text-align: center;
					line-height: 48rpx;
				}
				&-btn1 {
					width: 150rpx;
					height: 48rpx;
					border-radius: 24rpx;
					font-size: 24rpx;
					margin-left: auto;
					border: 1px solid $primary-color;
					color: $primary-color;
					box-sizing: border-box;
					justify-content: center;
				}
				&-btn2 {
					width: 150rpx;
					height: 48rpx;
					border-radius: 24rpx;
					font-size: 24rpx;
					margin-left: auto;
					color: #ffffff;
					box-sizing: border-box;
					justify-content: center;
					background-color: $gray-color;
				}
			}
		}
	}
</style>
